<!DOCTYPE html>
<!-- saved from url=(0049)https://www.bilibili.com/page-proxy/game-nav.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>哔哩哔哩游戏中心</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style type="text/css">
        /* 680 * 260 */
        html, body, img, a, span, b { margin: 0; padding: 0; border: 0;}
        a, a:hover { text-decoration: none;}
        .clearn { clear: both;}
        .clearfix:after { height: 0; display: block; visibility: hidden; clear: both; content: "";}
        .clearfix { *zoom: 1;}
        body { font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; line-height: 1;}
        .box { width: 466px; height: 256px; border-radius: 0 0 4px 4px; box-shadow: 1px 1px 3px rgba(0, 0, 0, .4); position: relative;background:#fff;}
        .left { width: 265px; margin: 12px 0 0 0; float: left;}
        .banner { width: 240px; height: 128px; margin-left: 12px;}
        .banner a { width: 240px; height: 128px; display: block; position: relative;}
        .banner a img { width: 240px; height: 128px; border-radius: 4px;}
        .banner span { width: 220px; padding: 0 10px; border-radius: 4px; position: absolute; bottom: 0px; left: 0px; font-size: 12px; line-height: 30px; text-shadow: 1px 1px 1px #000; color: #fff;background: url(//static.biligame.net/biligametop/img/shadow.png) repeat-x;}
        .brief { margin-top: 6px;}
        .brief a { width: 64px; height: 104px; padding: 6px 12px 0; display: block; float: left; overflow: hidden;}
        .brief a:hover { background-color: #e5e9ef;}
        .brief a img { width: 64px; height: 64px; border-radius: 12px;}
        .brief span { width: 4em; height: 14px; margin: 8px auto; display: block; font-size: 14px; line-height: 1; text-align: center; color: #222; overflow: hidden;}
        .right { width: 201px; min-height: 234px; margin: 12px 0 0 0; float: left; background: url(//static.biligame.net/biligametop/img/line.png) no-repeat;}
        .bbs { margin-top: 8px; margin-right: 12px; display: inline-block; *display: inline; *zoom: 1; float: right; font-size: 12px; color: #00a1d6;}
        .all { padding: 35px 0 0 6px; background: url(//static.biligame.net/biligametop/img/title.png) no-repeat;}
        .all a { padding-left: 16px; display: block; font-size: 12px; line-height: 28px; color: #222;}
        .all a:hover { color: #00a1d6; background-color: #e5e9ef;}
        .all a span { width: 13em; height: 28px; display: block; line-height: 28px; overflow: hidden;}
        .imgdiv { width: 220px; height: 220px; display: block; position: absolute; bottom: 0; left: 442px;}
    </style>
</head>
<body>

<div class="box clearfix">
    <div class="left">
        <div class="banner">
            <a target="_blank" href="https://game.bilibili.com/fgo/cp_2-3_sin/">
                <img src="54c705c8f910189e71dacba9ef88be64f833fa7c.jpg" alt="命运-冠位指定（Fate/GO）">
                <span>命运-冠位指定（Fate/GO）</span>
            </a>
        </div>
        <div class="brief clearfix">
                <a target="_blank" title="碧蓝航线" href="https://game.bilibili.com/blhx/fyyh">
                    <img src="abfe03ca09e2051e5edc2693499f5db4d72e0e79.png" alt="碧蓝航线">
                    <span>碧蓝航线</span>
                </a>
                <a target="_blank" title="双生视界" href="https://game.bilibili.com/sssj/sdyd/">
                    <img src="6afdae46521460c5faa39042932270c14befaf63.jpg" alt="双生视界">
                    <span>双生视界</span>
                </a>
                <a target="_blank" title="妄想破绽" href="https://game.bilibili.com/wxpz/">
                    <img src="8b8a20a27e5ee59025e0c38692ee15b755ebef7f.png" alt="妄想破绽">
                    <span>妄想破绽</span>
                </a>
        </div>
    </div>
    <div class="right">
        <div class="all">
                    <a target="_blank" data-img="//i0.hdslb.com/bfs/game/3ca92b672ee1bd41a12197964ff6c5f113f050f4.png" href="https://game.bilibili.com/mxycjh" style="overflow:hidden; white-space:nowrap;">
                        <span>梦想养成计划</span>
                    </a>
                    <a target="_blank" data-img="//i0.hdslb.com/bfs/game/d285529fdd582e285321ca73412c2fd874471edc.png" href="https://www.biligame.com/detail?id=102602" style="overflow:hidden; white-space:nowrap;">
                        <span>家庭教师</span>
                    </a>
                    <a target="_blank" data-img="//i0.hdslb.com/bfs/game/545d255682584480192247eca0248ad2ecce12b4.png" href="https://game.bilibili.com/dwbgx/" style="overflow:hidden; white-space:nowrap;">
                        <span>大王不高兴</span>
                    </a>
                    <a target="_blank" data-img="//i0.hdslb.com/bfs/game/c1f2ef23617e7d902240782ea98ad4b18fc0e1e7.png" href="https://www.biligame.com/detail/?id=101993" style="overflow:hidden; white-space:nowrap;">
                        <span>从零开始的异世界生活-无限</span>
                    </a>
                    <a target="_blank" data-img="//i0.hdslb.com/bfs/game/49e04cff471f8ff0685b2a97eb2d2d423273a46e.png" href="https://game.bilibili.com/pcr/yuyue/" style="overflow:hidden; white-space:nowrap;">
                        <span>公主连结Re:Dive</span>
                    </a>
                    <a target="_blank" data-img="//i0.hdslb.com/bfs/game/10dc2aa23378bed22310033e574e57b789db1365.png" href="https://game.bilibili.com/deadcells/" style="overflow:hidden; white-space:nowrap;">
                        <span>Dead Cells</span>
                    </a>
                    <a target="_blank" data-img="//i0.hdslb.com/bfs/game/6ed03a34511606576e1ee1daec6970dffc9ccbf1.png" href="https://game.bilibili.com/biped/" style="overflow:hidden; white-space:nowrap;">
                        <span>只只大冒险</span>
                    </a>
        </div>
    </div>
    <div class="imgdiv" style="background-repeat: no-repeat;"></div>
</div>
<!-- JAVASCRIPT -->
<script type="text/javascript">
    var onEventUtil = {
        addEventListener: function(element, type, handler){
            if(element.addEventListener){
                element.addEventListener(type, handler, false);
            }else if(element.attachEvent){
                element.attachEvent('on' + type, handler);
            }
        }
    };
    var aele = document.querySelectorAll('.all > a');
    var imgele = document.querySelectorAll('.imgdiv');
    for(var i = 0, max = aele.length; i < max; i++){
        onEventUtil.addEventListener(aele[i], 'mouseover', overimg);
        onEventUtil.addEventListener(aele[i], 'mouseout', outimg);
    }
    function overimg(){
        var img = this.getAttribute('data-img');
        imgele[0].style.backgroundImage = 'url(' + img + ')';
    }
    function outimg(){
        imgele[0].style.backgroundImage = '';
    }
    
</script>

</body></html>